<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>2024年，国庆快乐！</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <style>
    body {
      margin: 0;
      overflow: hidden;
      background: black;
      position: relative;
    }

    .content {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: white;
      z-index: 999;
      margin-top: 180px;
    }

    .danmu {
      position: absolute;
      white-space: nowrap;
      font-size: 1.5em;
      color: #e74c3c;
      animation: danmu-move 10s linear forwards;
    }

    @keyframes danmu-move {
      from { left: 100%; }
      to { left: -100%; }
    }

    .flag {
      position: absolute;
      top: 0;
      left: 0;
      width: 380px;
      height: 200px;
      background-image: url('img/Flag_of_the_People\'s_Republic_of_China.svg');
      background-size: cover;
      animation: flag-wave 2s infinite ease-in-out;
      z-index: 999;
      margin-top: 25px;
      margin-left:9px;
    }

    @keyframes flag-wave {
      0%, 100% { transform: rotate(0deg); }
      50% { transform: rotate(10deg); }
    }

    .countdown {
      margin-top: 20px;
      font-size: 1.5em;
      color: white;
    }


    canvas {
      position: absolute;
      z-index: 0;
    }
    .bottom-right-img {
  position: fixed; /* 使用固定定位 */
  right: 0;        /* 距离右边0px */
  bottom: 0;       /* 距离底部0px */
  width: auto;     /* 自动宽度，可以根据需要调整 */
  height: auto;    /* 自动高度，可以根据需要调整 */
  max-width: 100%;  /* 图片最大宽度为视口宽度的100%，可以根据需要调整 */
  max-height: 100%; /* 图片最大高度为视口高度的100%，可以根据需要调整 */
  z-index: 1000;   /* 确保图片在其他内容之上 */
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5); /* 添加阴影 */
  border-radius: 15px; /* 圆角 */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* 平滑过渡效果 */
  z-index:4;
}

.top-right-img {
  position: fixed; /* 使用固定定位 */
  right: 0;        /* 距离右边0px */
  top: 0;          /* 距离顶部0px */
  width: auto;     /* 自动宽度，可以根据需要调整 */
  height: auto;    /* 自动高度，可以根据需要调整 */
  max-width: 70%;  /* 图片最大宽度为视口宽度的70%，可以根据需要调整 */
  max-height: 70%; /* 图片最大高度为视口高度的70%，可以根据需要调整 */
  z-index: 1000;   /* 确保图片在其他内容之上 */
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5); /* 添加阴影 */
  border-radius: 15px; /* 圆角 */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* 平滑过渡效果 */
  z-index:4;
}

/* 当鼠标悬停在图片上时的效果 */
.bottom-right-img:hover,
.top-right-img:hover {
  transform: scale(1.1); /* 放大图片 */
}
.bottom-right-achievements {
  position: fixed;
  left: 20px;
  bottom: 20px;
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  font-family: 'Arial', sans-serif;
  z-index: 999;
  max-width: 500px;
  text-align: justify;
  line-height: 1.6;
}

.bottom-right-achievements h3 {
  margin-top: 0;
  font-size: 1.5em;
  text-align: center;
}
  </style>
</head>

<body>
    <div id="flag" class="flag"></div>
  <audio id="bgMusic" autoplay loop>
    <source src="music/music.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
  </audio>

  <div class="content">
    <h1>国庆快乐!</h1>
    <h2>2024年，庆祝新中国成立75周年</h2>
    <p>在过去的75年中，中国取得了令人瞩目的成就。</p>
    <div id="danmu-container"></div>
    <div id="countdown" class="countdown"></div>
  </div>
  <img src="img/logo.png" alt="描述文字" class="top-right-img">
  <img src="img/tianandoor.png" alt="描述文字" class="bottom-right-img">
  <div class="bottom-right-achievements">
    <h3>辉煌的新中国</h3>
    <p class="typewriter-text">2024年，新中国迎来了她的75岁华诞。在这一年里，我们见证了祖国在科技创新、经济发展、社会进步等方面的卓越成就。从嫦娥探月到深海探索，从数字经济的蓬勃发展到绿色能源的广泛应用，中国正以稳健的步伐迈向更加繁荣昌盛的未来。</p>
  </div>
  <canvas></canvas>
  <canvas></canvas>
  <canvas></canvas>
  
  <script src="js/js.js"></script>
    <body>
</html>